<template>
    <div id="enrol_index">
        <div class="ac-status">
            <div class="status-title">
                <span class="txt">活动状态：</span>
                <span class="btn" :class="{'fade':enrolData.status==3 }">{{register_txt}}</span>
            </div>
            <div class="item mx-1px-bottom">
                <div class="info-left">
                    <image :src="enrolData.img_list" mode="aspectFill"></image>
                </div>
                <div class="info-rigth">
                    <div class="name">{{enrolData.title}}</div>
                    <div class="time">{{enrolData.time_section}} </div>
                    <div class="address">{{enrolData.address}}</div>
                    <div class="money">
                        <span class="text subtitle" v-if="enrolData.fee_type != 'OFFLINE_CHARGES' && enrolData.fee_type != 'CHARGING'">{{enrolData.subtitle}}</span>
                        <span class="text" v-if="enrolData.payments && enrolData.payments.type == 0">{{enrolData.payments.point}}积分</span>
                        <span class="text" v-if="enrolData.payments && enrolData.payments.type == 1"><span>￥</span>{{enrolData.payments.price}}</span>
                        <span class="text" v-if="enrolData.payments && enrolData.payments.type == 2"><span>￥</span>{{enrolData.payments.price}}+{{enrolData.payments.point}}积分</span>
                        <span class="text" v-if="enrolData.payments && enrolData.payments.type == 4"><span>￥</span>{{enrolData.payments.price}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="ac-intro">
            <div class="title mx-1px-bottom">活动信息：</div>
            <div class="intro-content">
                <div class="info mx-1px-bottom">
                    <div class="info-tit">时间</div>
                    <div class="info-detail">{{enrolData.time_section}}</div>
                </div>
                <div class="info mx-1px-bottom">
                    <div class="info-tit">地点</div>
                    <div class="info-detail">{{enrolData.address}}</div>
                </div>
                <div class="info mx-1px-bottom" @click="jumpSign(myId)">
                    <div class="info-tit">报名人</div>
                    <div class="info-detail">已签到{{enrolData.signed_count }}人 / {{enrolData.member_count}}人报名</div>
                </div>
               <!-- <div class="info mx-1px-bottom" v-if="enrolData.coach.mobile">
                    <div class="info-tit">领队电话</div>
                    <div class="info-detail blue">{{enrolData.coach.mobile}}</div>
                </div>-->
            </div>
        </div>
        <div class="ac-Info" v-if="enrolData.can_sign===true && enrolMeta">
            <div class="mx-1px-bottom">
                <div class="txt">签到码</div>
            </div>
            <div class="code-wrap">
                <image :src="enrolMeta.img_src" mode="widthFix"></image>
                <p>会员扫码签到</p>
            </div>
        </div>
        <div class="endTxt" v-if="enrolData.status==3 && enrolData.can_reward>0">
            <div>活动已结束， <br>快来奖励表现出现的会员吧！</div>
            <div class="p2">奖励权限将于{{ enrolData.can_reward_limit }}失效<br />还可奖励{{ enrolData.can_reward }}积分</div>
        </div>
        <!--<div class="total-price">
            <div class="ac-total">
                <span>活动总价</span>
                <span class="txt">¥ 290.00</span>
            </div>
            &lt;!&ndash;<div class="disbursements">
                <span>实付款</span>
                <span class="txt">¥295.80</span>
            </div>&ndash;&gt;
        </div>-->
       <!-- <div class="bottomBar">
            <div class="item-left">
                <button class="bgWhite" @click="cancelConfirm" v-if="isCancel">取消报名</button>
                <button class="bgRed"   v-if="isSign">扫码签到</button>
            </div>
            <div class="item-rigth" v-if="enrolData.status==1 && state.member_status==0 && state.order && state.order.pay_status==0">
                <div class="money">
                    <span class="text subtitle" v-if="enrolData.fee_type != 'OFFLINE_CHARGES' && enrolData.fee_type != 'CHARGING'">{{enrolData.subtitle}}</span>
                    <span class="text" v-if="enrolData.payments && enrolData.payments.type == 0">{{enrolData.payments.point}}积分</span>
                    <span class="text" v-if="enrolData.payments && enrolData.payments.type == 1"><span>￥</span>{{enrolData.payments.price}}</span>
                    <span class="text" v-if="enrolData.payments && enrolData.payments.type == 2"><span>￥</span>{{enrolData.payments.price}}+{{enrolData.payments.point}}积分</span>
                    <span class="text" v-if="enrolData.payments && enrolData.payments.type == 4"><span>￥</span>{{enrolData.payments.price}}</span>
                </div>
                <div class="go-pay" @click="jumpPay(state.order.order_no)">去付款</div>
            </div>
        </div>-->
        <div class="bottomBar">
            <button v-if="enrolData.status==2" @click="jumpSign(myId)">查看报名人</button>
            <button v-if="enrolData.status==3 && enrolData.can_reward>0" @click="jumpRewards(myId)">奖励积分</button>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                enrolData:{
                    payments:[],
                    coach:{}
                },
                enrolMeta:{},
                register_txt:'',
                isCancel:'',
                isSign:'',
                myId:'',
                message:'',
                init:'',
                state:{},
                status_txt:''

            }
        },
        mounted(){
            var id = this.$root.$mp.query.id;
            this.myId = id;
            this.getMineEnrol(id);
            /*this.getCheck(id);*/
        },
        methods:{
            //跳到奖励积分
            jumpRewards(id){
                wx.navigateTo({
                    url:'/pages/rewards/main?id='+id
                })
            },
            //跳到签到列表页
            jumpSign(id){
                wx.navigateTo({
                    url:'/pages/signList/main?id='+id
                })
            },
//            跳到支付页面
            jumpPay(order_no){
                wx.navigateTo({
                    url:'/pages/pay/main?order_no='+order_no
                })
            },
            //请求去付款的的按钮的接口
            getCheck(myId){
                var token = this.$storage.get('user_token');
                wx.showLoading({
                    title:"加载中",
                    mask:true
                })
                this.$http
                    .get(this.$config.GLOBAL.baseUrl +'api/activity/show/check/'+ myId,{},{
                        headers: {
                            Authorization:token
                        }
                    })
                    .then(res=>{
                        res = res.data;
                        if(res.status){
                            /*console.log(res.data);*/
                            this.state = res.data;
                            /* this.status_txt = this. statusText();*/
                        } else {
                            wx.showModal({
                                content: res.message || "请求失败",
                                showCancel: false
                            })
                        }
                        wx.hideLoading();
                    },err=>{
                        wx.showModal({
                            content: '请求失败，请重试',
                            showCancel: false,
                        })
                        wx.hideLoading()
                    })
            },
            //去付款的按钮是否显示
            /*    statusText(){
             var s1 = this.enrolData.status;
             var s2 = this.state.member_status;
             var s3 = this.state.order;
             switch (s1) {
             case 1:
             switch (s2) {
             case 0:
             if (s3) {
             const pay_status = s3.pay_status;
             if (pay_status == 0) {
             return '在线活动待支付';
             }
             else {
             return '立即报名';
             }

             }
             else {
             return '立即报名';
             }
             case 1:
             return '活动已报名';
             case 4:
             return '线下活动待审核';
             }
             break;
             }
             },*/
            //点击取消报名成功的接口
            getCancel(myId){
                var token = this.$storage.get('user_token');
                wx.showLoading({
                    title:"加载中",
                    mask:true
                })
                this.$http
                    .post(this.$config.GLOBAL.baseUrl +'api/activity/cancel/'+ myId,{},{
                        headers: {
                            Authorization:token
                        }
                    })
                    .then(res=>{
                        res = res.data;
                        if(res.status){
                            this.message = res.message;
                        } else {
                            wx.showModal({
                                content: res.message || "请求失败",
                                showCancel: false
                            })
                        }
                        wx.hideLoading();
                        wx.showModal({
                            title:this.message,
                            content:"您已成功取消了“"+this.enrolData.title+"”的报名"
                        })
                    },err=>{
                        wx.showModal({
                            content: '请求失败，请重试',
                            showCancel: false,
                        })
                        wx.hideLoading()
                    })
            },
            //点击取消报名事假
            cancelConfirm(){
                if (this.enrolData.refund_status==0){
                    wx.showModal({
                        content:'本活动不支持退款，是否仍然取消报名？',
                        success: res => {
                            if (res.confirm){
                                this.getCancel(this.myId);
                            } else if(res.cancel){
                                console.log("取消");
                            }
                        }
                    })
                } else {
                    wx.showModal({
                        content:'是否取消报名？',
                        success:res =>{
                            if (res.confirm){
                                this.getCancel(this.myId);
                                /* debugger*/
                            } else if(res.cancel){
                                console.log("取消");
                            }
                        }
                    })
                }
            },

            //是否可以签到的判断
            isCanSign: function () {
                var mStatus = this.enrolData.member_status;
                var isCan = this.enrolData.can_sign;
                if ( mStatus==1 && isCan===true ) {
                    return true;
                }else{
                    return false;
                }
            },
            //是否取消报名的判断
            isCanCancel(){
                var status = this.enrolData.status;
                var mStatus = this.enrolData.member_status;
                var start = this.enrolData.starts_at;
                var cancel = this.enrolData.refund_term;
                var fee_type = this.enrolData.fee_type;
                var  refund_status = this.enrolData.refund_status;
                var  time = new Date(start.replace(/-/g,"/")).getTime() - cancel*60*1000 - new Date().getTime();
                if(refund_status == 0){
                    return false
                }

                if ( mStatus==1 || (mStatus == 0 && fee_type == 'CHARGING')) {
                    switch (true) {
                        case status==1: case status==4: case status==5: case status==2 && time>0:
                        return true;
                        default:
                            return false;
                    }
                }else{
                    return false;
                }
            },
//            请求报名详情页数据
            getMineEnrol(id){
                var token = this.$storage.get('user_token');
                wx.showLoading({
                    title:"加载中",
                    mask:true
                })
                this.$http
                    .get(this.$config.GLOBAL.baseUrl + 'api/activity/coachAct/'+id,{
                        type: 'mini_program'
                    },{
                        headers: {
                            Authorization:token
                        }
                    })
                    .then(res =>{
                        res = res.data;
                        if (res.status){
                            this.enrolData = res.data;
                            this.enrolMeta = res.meta;
                            this.register_txt = getApp().ac_status_txt(res.data.status);
                            this.isCancel = this.isCanCancel();
                            this.isSign = this.isCanSign();
                        } else {
                            wx.showModal({
                                content: res.message || "请求失败",
                                showCancel: false
                            })
                        }
                        wx.hideLoading();
                    },err =>{
                        wx.showModal({
                            content: '请求失败，请重试',
                            showCancel: false,
                        })
                        wx.hideLoading()
                    })
            }
        }

    }
</script>
<style rel="stylesheet/less" lang="less">
    @import "../../../static/global.less";
    page{
        height: 100%;
        background-color:#F3F3F3;
    }
    #enrol_index{
        .ac-status{
            margin:5px 0;
            background-color: #FFFFFF;
            .status-title{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding:0 15px;
                height:44px;
                color:#4A4A4A;
                font-size:14px;
                .btn{
                    padding:4px 6px;
                    border-radius: 2px;
                    /*border: 1px solid #9B9B9B;*/
                    color: #FFFFFF;
                    background-color:#fd8500;
                }
                .fade{
                    color: #ffbf7d;
                }
            }
            .item{
                background-color: #ffffff;
                padding: 10px 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                .info-left{
                    width: 95px;
                    height: 95px;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
                .info-rigth{
                    flex: 1;
                    padding-left:10px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow:ellipsis;
                    .name{
                        color: #000000;
                        font-size: 16px;
                        line-height: 22px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        padding-bottom: 4px;
                    }
                    .subtitle{
                        color: #9c9c9c;
                        font-size: 12px;
                    }
                    .time,.address{
                        font-size: 12px;
                        color: #9B9B9B;
                        line-height: 16px;
                        padding-bottom: 4px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow:ellipsis;
                    }
                    .money{
                        /*text-align: justify;*/
                        display: flex;
                        align-items: center;
                        justify-content:space-between ;
                        margin-top:10px;
                        .text{
                            color: #4A4A4A;
                            font-size: 16px;
                            line-height: 16px;
                            span{
                                font-size: 12px;
                            }
                        }
                        .subtitle{
                            color: #9c9c9c;
                            font-size: 12px;
                        }
                        .enroll-btn{
                            padding: 4px 8px;
                            font-size:12px;
                            color: #ffffff;
                            line-height: 16px;
                            background-color: #d8d8d8;
                        }
                        .red{
                            background-color: @globalColor;
                        }
                    }
                }
            }
        }
        .ac-intro{
            background-color:#FFFFFF;
            margin-bottom: 28px;
            .title{
                color: #4A4A4A;
                font-size: 14px;
                padding:0 0 0 15px;
                height: 44px;
                line-height: 44px;
            }
            .intro-content{
                padding:0 0 0 15px;
                .info{
                    padding:10px 0 8px 0;
                    display: flex;
                    .info-tit{
                        width: 60px;
                        margin-right:7px;
                        font-size: 14px;
                        color:#4A4A4A;
                    }
                    .info-detail{
                        /*overflow: hidden;*/
                        flex: 1;
                        font-size:16px;
                        color:#000;
                        padding:0 15px 0 0px;
                        line-height: 22px;
                    }
                    .blue{
                        color: #4990e2;
                    }
                }
            }
        }
        .ac-Info{
            background-color: #FFFFFF;
            padding: 0 15px 10px 15px;
            margin-bottom: 80px;
            .txt{
                font-size: 16px;
                height: 40px;
                line-height: 40px;
            }
            .code-wrap{
                text-align: center;
                padding:5px 0px;
                image{
                    margin:15px 20px;
                }
               p{
                   font-size: 16px;
                   margin-top: 5px;
                   color:#959595;
               }
            }
        }
        .endTxt{
            background: #fff;
            padding: 25px 12px;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            color: #000;
        }
        .total-price{
            padding: 0 15px 18px 15px;
            .ac-total{
                color:#888888;
                font-size: 12px;
                line-height: 20px;
                display: flex;
                justify-content: space-between;
                .txt{
                    color:#4A4A4A;
                }
            }
            .disbursements{
                color:#2E2D2D;
                font-size: 14px;
                line-height: 20px;
                margin-top: 4px;
                display: flex;
                justify-content: space-between;
                .txt{
                    color: @globalColor;
                }
            }
        }
        /*.bottomBar{
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: flex;
            .item-left{
                flex: 1;
                button{
                    font-size:16px;
                    border-radius: 0px;
                    height: 50px;
                    line-height: 50px;
                    &.bgWhite {
                        background-color: #FFFFFF;
                        color:#959595;
                    }
                    &.bgRed{
                        background-color:#ed0000;
                        color: #FFFFFF;
                    }

                }
                button::after{
                    border: none;
                }
            }
            .item-rigth{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                !*border-left:1px solid #DBDBDB;*!
                background-color:@globalColor;
                color: #FFFFFF;
                .money{
                    flex: 1;
                    .text{
                        font-size: 20px;
                        span{
                            font-size: 12px;
                        }
                    }
                }
                .go-pay{
                    flex: 1;
                    font-size:16px;
                }
            }
        }*/
        .bottomBar{
            position: fixed;
            bottom: 0;
            width: 100%;
            button{
                background-color: @globalColor;
                color: #FFFFFF;
                border-radius: 0;
                &.orange{
                    background-color: #ffbf7d;
                }
            }
            button::after{
                border: none;
            }
        }
    }
</style>